import { Button, Card, Descriptions } from 'antd'
import styles from './index.module.less'
import { useStore } from '../../store'
// import * as echarts from 'echarts'
import { useEffect, useState } from 'react'
import { formatState, formatNum, formatMoney } from '../../utils'
import api from '../../api/api'
import { Dashboard } from '../../types/api'
import { useCharts } from '../../hook/useChart'
export default function DashBoard() {
  const { userInfo } = useStore()
  console.log('userInfo', userInfo)
  //   const lineChartRef = useRef(null)
  //   const pieChartCityRef = useRef(null)
  //   const pieChartAgeRef = useRef(null)
  //   const radarChartRef = useRef(null)
  const [report, setReport] = useState<Dashboard.ReportData>()
  const [lineChartRef, lineChart] = useCharts()
  const [pieChartCityRef, pieChartCity] = useCharts()
  const [pieChartAgeRef, pieChartAge] = useCharts()
  const [radarChartRef, radarChart] = useCharts()
  useEffect(() => {
    // const lineChartDom = document.getElementById('lineChart')
    // const chartInstance = echarts.init(lineChartRef.current)
    // const pieChartCityInstance = echarts.init(pieChartCityRef.current)
    // const pieChartAgeInstance = echarts.init(pieChartAgeRef.current)
    // const radarChartInstance = echarts.init(radarChartRef.current)
    renderLineChart()
    renderPieCityChart()
    renderPieAgeChart()
    renderRadarChart()
  }, [lineChart, pieChartCity, pieChartAge, radarChart])
  useEffect(() => {
    getReportData()
  }, [])
  const getReportData = async () => {
    const data = await api.getReportData()
    setReport(data)
  }
  const renderLineChart = async () => {
    if (!lineChart) return
    const data = await api.getLineData()
    lineChart?.setOption({
      title: {
        text: '订单和流水走势图'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['订单', '流水']
      },
      grid: {
        left: '5%',
        right: '15%',
        bottom: '10%'
      },
      xAxis: {
        data: data.label
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '订单',
          type: 'line',
          data: data.order
        },
        {
          name: '流水',
          type: 'line',
          data: data.money
        }
      ]
    })
  }
  const renderPieCityChart = async () => {
    if (!pieChartCity) return
    const data = await api.getPieCityData()
    pieChartCity?.setOption({
      title: {
        text: '司机城市分布',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '城市分布',
          type: 'pie',
          radius: '50%',
          data
        }
      ]
    })
  }
  const renderPieAgeChart = async () => {
    if (!pieChartAge) return
    const data = await api.getPieAgeData()
    pieChartAge?.setOption({
      title: {
        text: '司机城市分布',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '城市分布',
          type: 'pie',
          radius: '50%',
          data
        }
      ]
    })
  }
  const renderRadarChart = async () => {
    if (!radarChart) return
    const data = await api.getRadarData()
    radarChart?.setOption({
      title: {
        text: '司机模型诊断',
        left: 'left'
      },
      legend: {
        data: ['老王']
      },
      radar: {
        indicator: data.indicator
      },
      series: [
        {
          name: '老王',
          type: 'radar',
          data: data.data
        }
      ]
    })
  }
  const handleRefreshPieChart = () => {
    renderPieCityChart()
    renderPieAgeChart()
  }
  return (
    <div>
      <div className={styles.dashboard}>
        <div className={styles.userInfo}>
          <img src={userInfo.userImg} className={styles.userImg}></img>
          <Descriptions title='欢迎新同学！'>
            <Descriptions.Item label='用户ID'>{userInfo.createId}</Descriptions.Item>
            <Descriptions.Item label='邮箱'>{userInfo.userEmail}</Descriptions.Item>
            <Descriptions.Item label='状态'>{formatState(userInfo.state)}</Descriptions.Item>
            <Descriptions.Item label='手机号'>{userInfo.mobile}</Descriptions.Item>
            <Descriptions.Item label='岗位'>{userInfo.job}</Descriptions.Item>
            <Descriptions.Item label='部门'>{userInfo.deptName}</Descriptions.Item>
          </Descriptions>
        </div>
      </div>
      <div className={styles.report}>
        <div className={styles.card}>
          <div className={styles.title}>总司机数</div>
          <div className={styles.data}>{formatNum(report?.driverCount)}个</div>
        </div>
        <div className={styles.card}>
          <div className={styles.title}>总流水</div>
          <div className={styles.data}>{formatMoney(report?.totalMoney)}元</div>
        </div>
        <div className={styles.card}>
          <div className={styles.title}>总订单</div>
          <div className={styles.data}>{formatNum(report?.orderCount)}单</div>
        </div>
        <div className={styles.card}>
          <div className={styles.title}>开通城市</div>
          <div className={styles.data}>{formatNum(report?.cityNum)}座</div>
        </div>
      </div>
      <div className={styles.chart}>
        <Card
          title='订单和流水走势图'
          extra={
            <Button type='primary' onClick={renderLineChart}>
              刷新
            </Button>
          }
        >
          <div id='linChart' className={styles.itemLine} ref={lineChartRef}></div>
        </Card>
      </div>
      <div className={styles.chart}>
        <Card
          title='司机分布'
          extra={
            <Button type='primary' onClick={handleRefreshPieChart}>
              刷新
            </Button>
          }
        >
          <div className={styles.pieCharts}>
            <div id='pieChartCity' className={styles.pieItem} ref={pieChartCityRef}></div>
            <div id='pieChartAge' className={styles.pieItem} ref={pieChartAgeRef}></div>
          </div>
        </Card>
      </div>
      <div className={styles.chart}>
        <Card
          title='模型诊断'
          extra={
            <Button type='primary' onClick={renderRadarChart}>
              刷新
            </Button>
          }
        >
          <div id='radarChart' className={styles.itemLine} ref={radarChartRef}></div>
        </Card>
      </div>
    </div>
  )
}
